import 'package:flutter/material.dart';
import 'package:getx_scaffold/getx_scaffold.dart';
import 'package:intl/intl.dart';
import 'package:oramemo/common/langs/text_key.dart';
import 'package:oramemo/widget/gradient_app_head.dart';
import 'package:oramemo/widget/gradient_background.dart';
import 'package:oramemo/widgets/filter_dropdown.dart';
import '../widgets/subscription_status_card.dart';
import '../widgets/membership_record_card.dart';
import '../widgets/filter_dropdown_button.dart';

class ConsumptionRecordPage extends StatelessWidget {
  ConsumptionRecordPage({super.key});

  final List<FilterOption> _filterDate = [
    FilterOption(id: '1', name: TextKey.dateLastWeek.tr),
    FilterOption(id: '2', name: TextKey.dateLastMonth.tr),
    FilterOption(id: '3', name: TextKey.dateLastYear.tr),
    FilterOption(id: '4', name: TextKey.allDates.tr),
  ];

  final List<FilterOption> _filterState = [
    FilterOption(id: '1', name: TextKey.statusActive.tr),
    FilterOption(id: '2', name: TextKey.statusExpired.tr),
    FilterOption(id: '4', name: TextKey.allStatus.tr),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          GradientAppHead(title: TextKey.consumptionRecordTitle.tr),
          Expanded(
            child: GradientBackground(
              child: SingleChildScrollView(
                padding: const EdgeInsets.all(16),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    SubscriptionStatusCard(
                      title: TextKey.currentSubscription.tr,
                      type: TextKey.quarterlyVIP.tr,
                      startDate: '2024-01-15',
                      endDate: '2024-04-14',
                    ),
                    const SizedBox(height: 24),
                    Text(
                      TextKey.filter.tr,
                      style: const TextStyle(
                        fontSize: 16,
                        fontWeight: FontWeight.w500,
                      ),
                    ),
                    const SizedBox(height: 12),
                    Row(
                      children: [
                        Expanded(
                          child: _buildDropdownButton(TextKey.allStatus.tr, _filterState,
                              (selectedOptions) {
                            if (selectedOptions.isNotEmpty) {
                              //'选中的状态: ${selectedOptions.first.name}');
                            }
                          }),
                        ),
                        const SizedBox(width: 12),
                        Expanded(
                          child: _buildDropdownButton(TextKey.allDates.tr, _filterDate,
                                  (selectedOptions) {
                                if (selectedOptions.isNotEmpty) {
                                  //'选中的日期区间: ${selectedOptions.first.name}');
                                }
                              }),
                        ),
                      ],
                    ),
                    const SizedBox(height: 16),
                    MembershipRecordCard(
                      type: TextKey.quarterlyMembership.tr,
                      startDate: '2024-01-15',
                      endDate: '2024-04-14',
                      status: MembershipStatus.active,
                    ),
                    const SizedBox(height: 12),
                    MembershipRecordCard(
                      type: TextKey.monthlyMembership.tr,
                      startDate: '2023-01-15',
                      endDate: '2023-02-14',
                      status: MembershipStatus.expired,
                    ),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildDropdownButton(String title, List<FilterOption> options,
      Function(List<FilterOption>) onFilterChanged) {
    return FilterOverlayDropdown(
      title: title,
      options: options,
      isMultiSelect: false,
      activeColor: Colors.blue,
      onFilterChanged: onFilterChanged,
    );
  }
}
